<template>
	<view class="bg-white">
		<view class="w-670">
			<view class="flex padding-top">
				<view class="bluehead bg-blue fs-24">白金</view>
				<text class="fs-32 text-bold margin-left ">{{goldgraph[0].typename}}（{{goldgraph[0].tradeamount}}）</text>
			</view>

			<view class="margin-top section flex">
				<view type="default" class="bluetype bg-blue light">无风险</view>
				<view type="default" class="bluetype text-blue s-r-1 margin-left">白嫖型</view>
			</view>
			<view class="flex color-b fs-24 margin-top">
				<text class="basis-df ">日涨跌幅</text>
				<text class="basis-df ">最新净值（{{thistime.month}}-{{thistime.day}}）</text>
			</view>
			<view class="flex color-b fs-52 margin-top text-bold">
				<text class="basis-df text-red">+{{goldgraph[0].changepercent}}%</text>
				<text class="basis-df text-black ">1.7310</text>
			</view>
			<view class="margin-top mid"></view>


			<!-- ——————————————————————导航—————————————————— -->
			<swiper @change="changeTab" :current="curIndex" style="height:550rpx">
				<swiper-item class="margin-top">
					<scroll-view scroll-y="true">

						<view class="swiper-item">

							<view class="flex justify-between thre">
								<view class=" " :class="[btnIndex==index?'activeBlue':'',btnIndex==index?'':'btn-ite']"
									v-for="(i,index) in btnNav" :key="i" @tap="btnChange(index)">{{i}}</view>
							</view>
							<!-- ————————————————————收益走势 ————————————————-->
							<view class="margin-top" v-show="btnIndex==0">

								<view class="">
									<view class="flex justify-between">
										<view class="basis-df">
											<view class="fs-24 cuIcon-title text-blue">
												<text class="text-black">本产品：</text>
												<text class="text-red fs-32">+60.28%</text>
											</view>
										</view>
										<view class="basis-df">
											<view class="fs-24 cuIcon-title text-black">
												<text class="text-black">沪深300：</text>
												<text class="text-red fs-32">+60.28%</text>
											</view>
										</view>
									</view>
								</view>
								<!-- K线图 -->
								<view class="content margin-top">
									<view class="charts-box">
										<qiun-data-charts type="line" :chartData="chartsDataLine1" />
										
									</view>
								</view>

								<view class="flex text-center timeGary">
									<view class=" flex-sub fs-24 p-34 " :class="index==TabCur?'blackArrow':''"
										v-for="(item,index) in time" :key="index" @tap="tabSelect" :data-id="index">
										{{item}}
									</view>
								</view>


							</view>
							<!-- ————————————————————收益走势 ————————————————-->
							<view class="margin-top" v-show="btnIndex==1">
								
								<view class="">
									<view class="flex justify-between">
										<view class="basis-df">
											<view class="fs-24 cuIcon-title text-blue">
												<text class="text-black">本产品：</text>
												<text class="text-red fs-32">+60.28%</text>
											</view>
										</view>
										<view class="basis-df">
											<view class="fs-24 cuIcon-title text-black">
												<text class="text-black">沪深300：</text>
												<text class="text-red fs-32">+60.28%</text>
											</view>
										</view>
									</view>
								</view>
								<!-- K线图 -->
								<view class="content margin-top">
									<view class="charts-box">
										<qiun-data-charts type="line" :chartData="chartsDataLine1" />
										
									</view>
								</view>
								
								<view class="flex text-center timeGary">
									<view class=" flex-sub fs-24 p-34 " :class="index==TabCur?'blackArrow':''"
										v-for="(item,index) in time" :key="index" @tap="tabSelect" :data-id="index">
										{{item}}
									</view>
								</view>
								
							</view>
							<view class="" v-show="btnIndex==2">
								数据暂无
							</view>

						</view>
					</scroll-view>
				</swiper-item>
			<!-- 	<swiper-item>
					<view class="swiper-item">561561</view>
				</swiper-item> -->
			</swiper>

			<view class="flex " style="margin-top: 72rpx;">
				<view class="flex-sub text-bold fs-32">历史业绩</view>
				<view class="flex-sub  text-right ">
					<text>更多业绩</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<!-- ——————————————阶段业绩—————————————— -->

			<!-- ——————————————年度业绩—————————————— -->
			<view class="year">
				<view class="yeartitle margin-top">
					<view class=" fs-24" v-for="y in year.nav" :key="y">{{y}}</view>

				</view>
				<view class="yearCon justify-between pt-16" v-for="l in year.list" :key="l.time">
					<view class=" fs-32 ">{{l.time}}</view>
					<view class=" fs-32 text-red">+{{l.hui}}%</view>
					<view class=" fs-32 ">{{l.avg}}</view>

				</view>
			</view>

			<view class="buyandmai">
				<view class="buyactive">
					买入
				</view>
				<view class="">
					卖出
				</view>
			</view>
			<view class="buyline">
				<view class="flex text-center justify-between ">
					<view class="flex-sub">买入</view>
					<view class="flex-sub">确认份额</view>
					<view class="flex-sub">查看收益</view>
				</view>
				<view class="cu-steps ">
					<view class="cu-item smalltime" v-for="(item,index) in basicsList" :key="index">
						<text :class="'cuIcon-' + item.cuIcon"></text> {{item.name}}
					</view>
				</view>
			</view>
			<view class="score">
				黄金股票评分
			</view>
			<view class="scoreImg flex justify-between">
					<view>短期(近一年)</view>
					<view>短期(近一年)</view>
					<view>短期(近一年)</view>
			</view>
			<view class="scoreImg flex justify-between">
					<view class="scroeiii" :style="yoha">70</view>
					<view class="scroeiii" :style="yoso">70</view>
					<view class="scroeiii" :style="yoso">70</view>
			</view>
			<view class="footer">过往业绩不预示未来表现,市场有风险,投资需谨慎</view>
			<view class="dixiad padding flex" style="width: 750rpx;">
			<!-- 	<button class="flex-sub cu-btn  margin-tb-sm lg bg-white" @tap="goShot()">定投</button> -->
				<button class="flex-sub cu-btn  margin-tb-sm lg bg-1f" @tap="goBuy()">买入</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers("products")
	export default {
		
		data() {
			return {
			thistime:{
				weekend :"",
				month:"",
				day:"",
				year:"",
				hs:""
			},
				yoso:"background: url(../static/792@2x.png);background-size:contain;",
				yoha:"background: url(../static/icon_gupiaoxiangqing_gupiaopinfen@2x.png);background-size:contain;",
				basicsList: [{
						cuIcon: 'round',
						name: '今日15:00前'
					},
					{
						cuIcon: 'round',
						name: '03-31(星期三)'
					},
					{
						cuIcon: 'round',
						name: '04-01(星期四)'
					}
				],
				basics: 0,
				TabCur: 0,
				scrollLeft: 0,
				navData: ["业绩", "概况", "持仓", "费率", "公告"],
				curIndex: 0,
				btnNav: ["业绩走势", '净值走势', '实时估值'],
				btnIndex: 0,

				chartsDataLine1: {
					"categories": ["3-27", "", "9-23", "", "3-29", ""],
					"series": [{
						"name": "",
						"data": [5, 8, 25, 37, 4, 20]
					}, {
						"name": "",
						"data": [70, 40, 65, 100, 44, 68]
					}, {
						"name": "",
						"data": [100, 80, 95, 150, 112, 132]
					}],

				},
				// time: ['近一个月'],
				time: ['月', '季', '半年', '年'],
			
				
				stage: {
					"nav": ["日期", "本产品", "沪深300", "同类排名"],
					"list": [{
							"week": "近一周",
							"product": 7.56,
							"hu": 3.68,
							"top": 6,
							"order": 5785
						},
						{
							"week": "近一月",
							"product": 2.56,
							"hu": 4.68,
							"top": 6,
							"order": 7785
						},
						{
							"week": "近一年",
							"product": 4.54,
							"hu": 2.28,
							"top": 5,
							"order": 5785
						}
					]
				},
				year: {
					"nav": ["日期", "涨幅率", "同类排行"],
					"list": [{
							"time": "2020",
							"hui": 7.56,
							"avg": "6/4654",

						},
						{
							"time": "2019",
							"hui": 2.06,
							"avg": "21/4396",
						},
						{
							"time": "2018",
							"hui": 5.56,
							"avg": "34/5421",
						}
					]
				},
			}
		},
		computed:{
			...mapState(["golddetails","goldgraph"])
		},
		
		async onLoad(e) {
			console.log(e.type)
			this.getgolddetails(e.type);
			await this.getgoldgraph({type:e.type,month:1})
			this.ggai()
			this.gettime()
			this.basicsList[1].name=this.thistime.hs
			this.basicsList[2].name=Number(this.thistime.month)+1+"--"+this.thistime.day
		},
		methods: {
			...mapActions(["getgolddetails","getgoldgraph"]),
			btnChange(i) {
				this.btnIndex = i
			},
			change(index) {
				this.curIndex = index;

			},

			changeTab(e) {
				this.curIndex = e.detail.current
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			//定投
			goShot(){
				uni.navigateTo({
					url:"/pagesA/t-fundAip/t-fundAip"
				})
			},
			//买入
			goBuy(){
				uni.getStorage({
					  key: 'userid',
					  success:(res)=> {
						  console.log(res)
						  if(res!=""){
							   uni.navigateTo({
							   	url:"/pagesA/t-fundBuy/t-fundBuy?name="+this.goldgraph[0].typename+"&rateOfReturn="+this.goldgraph[0].changepercent+"&product="+this.goldgraph[0].type+"&current="+"gold"+"&fixedDay="+0+"&startmoney=0"
							   })
						  }else{
							  uni.showToast({
							      title: '跳转登录',
							      duration: 2000,
							  	success() {
							  		setTimeout(()=>{
							  			uni.navigateTo({
							  				url:"/pages/login/login"
							  			})
							  		},1000)
							  		
							  	}
							  });
						  }
					  },
					  fail:(err)=> {
					  	uni.showToast({
					  	    title: '跳转登录',
					  	    duration: 2000,
							success() {
								setTimeout(()=>{
									uni.navigateTo({
										url:"/pages/login/login"
									})
								},1000)
								
							}
					  	});
					  }
				})
			
			},
			//gg这个需要留着这是将获取到的数组赋值给折线图用的
			ggai(){
				// this.chartsDataLine1.series[2].data=this.goldgraph.price-0
				var a= this.goldgraph.map((aa,b)=>{
					return aa.price
				})
				console.log(a)	
			},
			// 获取当前时间
			gettime(){
					var myDate = new Date();
					     this.thistime.year = myDate.getFullYear();//获取年
					     this.thistime.month = myDate.getMonth();
					     this.thistime.day = myDate.getDate();//获取日
					    this.thistime.weekend = myDate.getDay(); 
						this.thistime.hs= myDate.toLocaleString('chinese', { hour12: false })
					    var weeks = new Array("周日", "星周", "周二", "周三", "周四", "周五", "周六");
						var month = ["01","02","03","04","05","06","07","08","09","10","11","12"]
					    this.thistime.weekend= weeks[this.thistime.weekend]
						this.thistime.month= month[this.thistime.month]
					　　//这些if判断是在小于10的时候前面自动补0				   
					    if (this.thistime.day<10) {
					       this.thistime.day = '0'+this.thistime.day
					    }	
			},
	
	
		}
	}
</script>
<style>
	page{
		padding-bottom: 132rpx;
	}
</style>

<style lang="scss" scoped>
	.w-670 {
		width: 670rpx;
		margin: 0 auto;
	}
	.fs-32 {
		font-size: 32rpx;
	}

	.fs-24 {
		font-size: 24rpx;
	}

	.fs-52 {
		font-size: 52rpx;
	}

	.color-b {
		color: #BBBBBB;
	}

	.color-9 {
		color: #999999;
	}

	.bg-1f {
		background: #1F6CC0;
		color: white;
	}

	.p-34 {
		padding: 14rpx 15rpx;

	}

	.pt-16 {
		padding-top: 16rpx;
	}

	// .color-47{
	// 	color: #474747FF;
	// }

	.section {
		.s-r {
			border: 2px solid #BBD8FF;
			color: #007AFF;
			background-color: white;

		}
	}

	.mid {
		width: 750rpx;
		height: 24rpx;
		color: #F8F7F7;
	}

	.active {
		color: #323232;
		font-weight: bold;
		border-bottom: 2px solid #323232;
	}

	.btnNav {
		// color: #FF727272;

		&::after {
			content: '';
			width: 100rpx;
		}

		.btn-item {
			color: #727272;
			background: #E0E0E0;
			font-size: 24rpx;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.charts-box {
		width: 100%;
		height: 300rpx;
		// border: 1px solid red;
	}

	.mt-16 {
		margin-top: 16rpx;
	}

	.mt-20 {
		margin-top: 20rpx;
		overflow: hidden;
	}

	.footer {
		// height: 50rpx;
		// line-height: 50rpx;
		font-size: 20rpx;
		font-weight: 300;
		margin-top: 50rpx;
		overflow: hidden;
		color: #C0C0C0;
	}

	.bluehead {
		height: 42rpx;
		width: 88rpx;
		line-height: 42rpx;
		text-align: center;
	}

	.bluetype {
		height: 44rpx;
		width: 112rpx;
		line-height: 44rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.s-r-1 {
		border: 1rpx solid #BBD8FF;
	}

	.thre {
		font-size: 32rpx;
	}

	.activeBlue {
		color: #4B70B6;
		font-weight: bold;
	}

	.activeBlue::after {
		display: block;
		content: "";
		width: 100%;
		height: 4rpx;
		background-color: #4B70B6;
		margin-top: 17rpx;
	}

	.timeGary {
		background: #F8F7F7;
		font-size: 24rpx;
		font-weight: 400;
		color: #9A9A9A;

	}

	.blackArrow {
		position: relative;
	}

	.blackArrow::after {
		position: absolute;
		top: -18rpx;
		left: 70rpx;
		display: block;
		content: "";
		box-sizing: content-box;
		width: 0rpx;
		height: 0rpx;
		border-left: 12rpx solid transparent;
		border-right: 12rpx solid transparent;
		border-bottom: 18rpx solid black;
	}

	.yeartitle {
		display: flex;
		justify-content: space-between;
	}

	.yearCon {
		display: flex;
		justify-content: space-between;
	}

	.buyandmai {
		width: 750rpx;
		margin-top: 45rpx;
		margin-left: -40rpx;
		padding: 0 40rpx;
		height: 92rpx;
		line-height: 92rpx;
		display: flex;
		border-top: 1rpx solid #E6E6E6;
		border-bottom: 1rpx solid #E6E6E6;

		view {
			margin-right: 30rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #D1D1D1;
		}

		.buyactive {
			font-size: 32rpx;
			font-weight: bold;
			color: #4B70B6;
		}
	}

	.buyline {
		width: 750rpx;
		margin-left: -40rpx;
		padding: 40rpx;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.smalltime {
		font-size: 24rpx;
		font-weight: 400;
		color: #7A7979;
	}

	.score {
		width: 750rpx;
		margin-top: 45rpx;
		margin-left: -40rpx;
		padding: 0 40rpx;
		padding-bottom: 24rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #323232;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.scoreImg {

			.scroeiii {
				margin-top: 25rpx;
				height: 92.2rpx;
				width: 92.2rpx;
				line-height: 92.2rpx;
				text-align: center;
			}
	}
	.dixiad{
		width: 750rpx;
		padding: 0;
		padding-bottom: 20rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		button{
			margin-top: 10rpx;
		}
	}
</style>
